<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
</div>

<!-- 1、使用这种，2、使用template标签 -->
<script type="text/x-template" id="cpn">
    <div>
        <h2>{{title}}</h2>
        <p>我是内容，哈哈哈哈哈哈</p>
    </div>
</script>

<template id="cpn2">
    <div>
        <ul>
            <li v-for="(item,index) in cmovies">{{item}}</li>
        </ul>
        <h2>{{cmessage}}</h2>
    </div>
</template>

<div id="app2">
    <cpn2 v-bind:cmovies="movies" :cmessage="message"></cpn2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 1、创建组件构造器对象
    const cpnc1 = Vue.extend({
        template:'#cpn',
        data(){
            return {
                title:'abs'
            }
        }
    })

    // 父子组件
    const cpnc2 = Vue.extend({
        template:`<div>
            <h2>我是标题2</h2>
            <p>我是内容，呵呵呵呵呵呵</p>
            <cpnc1></cpnc1>
            </div>`,
        components:{
            cpnc1:cpnc1
        }
    })
    // 2、注册组件,全局组件
    // Vue.component('my-cpn',cpnc)
    // 3、局部组件
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        components:{
            my_cpn:cpnc2
        }
    });

    // 父子组件之间的传值
    const cpn2 = {
        template:'#cpn2',
        props:['cmovies','cmessage']
    }

    const app2 = new Vue({
        el:'#app2',
        data:{
            message:'你好啊',
            movies:['海王','海贼王','红楼梦']
        },
        components:{
            cpn2
        }
    });

</script>
</body>
</html>